<!--
 * @Author: your name
 * @Date: 2020-09-14 18:03:01
 * @LastEditTime: 2020-09-24 17:56:21
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \admin-management\web\src\views\layout\test.vue
-->
<!--
 * @Author: your name
 * @Date: 2020-09-01 11:26:12
 * @LastEditTime: 2020-09-14 17:57:44
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \admin-management\web\src\views\layout\user-profile.vue
-->

<template>
  <CustomDialog v-model:visible="visibleDialog" @confirm="handleOk" :title="'图库'" width="80%">
    <Upload :type="type" @file="getFile" />
  </CustomDialog>
</template>

<script>
import { BASE_URL } from '../../utils/config';
import { computed, ref } from 'vue';
import CustomDialog from '../custom-dialog/index';
import Upload from './upload';
export default {
  name: 'UploadDialog',
  components: {
    CustomDialog,
    Upload
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'multiple'
    }
  },
  setup(props, { emit }) {
    console.log(props.type)
    let visibleDialog = computed({
      get: () => props.visible,
      set: (val) => {
        emit('update:visible', false);
      }
    });

    let files = ref([]);
    function getFile(file) {
      files.value = file;
      emit('file', file);
    }

    function handleOk() {
      emit('upload-ok', files.value);
      emit('update:visible', false);
    }

    return {
      visibleDialog,
      handleOk,
      getFile,
      BASE_URL
    };
  }
};
</script>
<style lang="scss" scoped>
.preview-img {
  width: 102px;
  height: 102px;
}
</style>
